<template>
  <div class="_class">
    <div class="top">
      <el-button type="primary" size="large" @click="updateClass(null)"
        >新增</el-button
      >
    </div>
    <el-table
      :data="classData"
      style="width: 100%"
      border
      :header-cell-style="{ textAlign: 'center' }"
      :cell-style="{ textAlign: 'center' }"
      :row-class-name="tableRowClassName"
    >
      <el-table-column prop="id" label="班级编号" width="120" />
      <el-table-column prop="className" label="班级">
        <template #default="scope">
          <div class="el_t_c_click" @click="rowClick(scope.row)">
            {{ scope.row.className }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="t_id" label="教师编号" width="120" />
      <el-table-column prop="teacherName" label="班主任" />
      <el-table-column label="是否删除" prop="is_delete" width="120">
        <template #default="scope">
          {{ scope.row.is_delete ? "是" : "否" }}
        </template>
      </el-table-column>

      <el-table-column label="操作" fixed="right" width="120">
        <template #default="scope">
          <el-button
            link
            type="primary"
            size="small"
            @click="updateClass(scope.row)"
            >编辑</el-button
          >
          <el-button
            link
            type="primary"
            size="small"
            @click="deleteClass(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      v-model="dialogVisible"
      :title="form.title"
      width="30%"
      :before-close="handleClose"
    >
      <el-form
        :model="form"
        label-width="120px"
        ref="classFormRef"
        :rules="rules"
      >
        <el-form-item label="班级名称" prop="className">
          <el-input v-model="form.className"></el-input>
        </el-form-item>
        <el-form-item label="班主任" prop="t_id">
          <el-select v-model="form.t_id" placeholder="请选择班主任">
            <el-option
              v-for="item in teacherList"
              :label="item.name"
              :value="item.id"
              :key="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="状态" prop="is_delete" v-show="form.id">
          <el-radio-group v-model="form.is_delete">
            <el-radio :label="0" border>存在</el-radio>
            <el-radio :label="1" border>删除</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleClose">取消</el-button>
          <el-button type="primary" @click="updateClassCommit">
            提交
          </el-button>
        </span>
      </template>
    </el-dialog>

    <el-drawer
      v-model="courseVisible"
      title="班级课程"
      direction="rtl"
      size="50%"
    >
      <div>
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>{{ nowClass.className }}</span>
            </div>
          </template>
          <div class="courseFromdiv">
            <!-- 表单添加 -->
            <el-form
              :model="courseForm"
              label-width="60px"
              ref="classFormRef"
              :rules="courseFormRules"
            >
              <el-form-item label="课程" prop="course_id">
                <el-select
                  v-model="courseForm.course_id"
                  :placeholder="
                    courseList.length != 0 ? '请选择课程' : '全部课程都已经添加'
                  "
                >
                  <el-option
                    v-for="item in courseList"
                    :label="item.name"
                    :value="item.id"
                    :key="item.id"
                    :disabled="item.type"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="班主任" prop="t_id">
                <el-select v-model="courseForm.t_id" placeholder="请选择班主任">
                  <el-option
                    v-for="item in teacherList"
                    :label="item.name"
                    :value="item.id"
                    :key="item.id"
                  />
                </el-select>
              </el-form-item>
              <el-button type="primary" @click="addClassCourse">添加</el-button>
            </el-form>
          </div>
          <el-table :data="classCourseList">
            <el-table-column property="courseName" label="课程" width="150" />
            <el-table-column property="teacherName" label="教师" width="200" />
            <el-table-column label="操作">
              <template #default="scope">
                <el-button
                  link
                  type="primary"
                  size="small"
                  @click="updateClassCourse(scope.row)"
                  >编辑</el-button
                >
                <!-- 对话框 -->
                <el-dialog
                  v-model="updateClassCourseVisible"
                  title="Tips"
                  width="30%"
                  :before-close="courseHandleClose"
                >
                  <span>
                    <el-form
                      :model="courseForm"
                      label-width="60px"
                      ref="classFormRef"
                      :rules="courseFormRules"
                    >
                      <el-form-item label="班主任" prop="t_id">
                        <el-select
                          v-model="courseForm.t_id"
                          placeholder="请选择班主任"
                        >
                          <el-option
                            v-for="item in teacherList"
                            :label="item.name"
                            :value="item.id"
                            :key="item.id"
                          />
                        </el-select>
                      </el-form-item>
                      <el-form-item label="状态" prop="is_delete">
                        <el-radio-group v-model="courseForm.is_delete">
                          <el-radio :label="0" border>存在</el-radio>
                          <el-radio :label="1" border>删除</el-radio>
                        </el-radio-group>
                      </el-form-item>
                    </el-form>
                  </span>
                  <template #footer>
                    <span class="dialog-footer">
                      <el-button @click="courseHandleClose">Cancel</el-button>
                      <el-button
                        type="primary"
                        @click="updateClassCourseCommit"
                      >
                        Confirm
                      </el-button>
                    </span>
                  </template>
                </el-dialog>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </div>
    </el-drawer>
  </div>
</template>

<script>

import { request } from "../utils/http";
import { onMounted, onBeforeMount, reactive, ref, unref, nextTick } from "vue";
import { ElMessage } from "element-plus";
export default {
  setup() {
    let classData = ref([]);
    let dialogVisible = ref(false);
    // 表单
    let form = ref({
      title: null,
      id: null,
      className: null,
      t_id: null,
    });
    let classFormRef = ref(null);
    let rules = ref({
      className: [
        {
          required: true,
          message: "Please input Activity className",
          trigger: "blur",
        },
        {
          min: 1,
          max: 10,
          message: "Length should be 1 to 10",
          trigger: "blur",
        },
      ],
      t_id: [
        {
          required: true,
          message: "Please select Activity Teacher",
          trigger: "blur",
        },
      ],
    });
    let teacherList = ref([]);
    function getClassList() {
      request.get("/class/Alllist").then((res) => {
        console.log(res);
        if (res.status != 200) {
          return ElMessage({
            type: "error",
            message: res.message,
          });
        }
        classData.value = res.data;
        console.log(classData);
      });
    }
    onBeforeMount(() => {
      getClassList();
    });
    // 获取教师列表
    function getTeacherList() {
      request.get("/user").then((res) => {
        console.log(res);
        if (res.status != 200) {
          ElMessage({
            type: "error",
            message: res.message,
          });
        }
        teacherList.value = res.data;
        console.log(teacherList);
      });
    }
    function updateClass(row) {
      console.log(row);
      if (row) {
        form.value = { ...row };
        console.log(form);
        form.value.title = "编辑";
      } else {
        form.value.title = "新增";
      }
      if (teacherList.value.length == 0) {
        getTeacherList();
      }
      nextTick(() => {
        dialogVisible.value = true;
      });
    }

    // handleClose 关闭清除表单
    function handleClose() {
      // console.log(classFormRef);
      dialogVisible.value = false;
      form.value = {
        title: null,
        id: null,
        className: null,
        t_id: null,
      };
    }
    function updateClassCommit() {
      console.log(form);
      // return;
      // 提交修改
      if (form.value.id) {
        request.put("/class/update", unref(form)).then((res) => {
          console.log(res);
          if (res.status != 200) {
            return ElMessage.error(res.message);
          }
          ElMessage.success(res.message);
          getClassList();
          handleClose();
        });
      } else {
        request.post("/class/add", unref(form)).then((res) => {
          console.log(res);
          if (res.status != 200) {
            return ElMessage.error(res.message);
          }
          ElMessage.success(res.message);
          getClassList();
          handleClose();
        });
      }
    }

    // 删除班级
    function deleteClass(id) {
      ElMessageBox.confirm(
        "proxy will permanently delete the Class. Continue?",
        "Warning",
        {
          confirmButtonText: "OK",
          cancelButtonText: "Cancel",
          type: "warning",
        }
      )
        .then(() => {
          request.delete(`/class/delete/${id}`).then((res) => {
            if (res.status != 200) {
              return ElMessage.error(res.message);
            }
            ElMessage.success(res.message);
            getClassList();
          });
        })
        .catch(() => {
          ElMessage({
            type: "info",
            message: "Delete canceled",
          });
        });
    }
    let courseVisible = ref(false);
    let nowClass = ref({});
    let classCourseList = ref([]);
    let courseList = ref([]);
    let courseForm = ref({
      course_id: null,
      t_id: null,
      class_id: null,
    });
    // 每行点击查看事件
    function rowClick(row) {
      console.log(row);
      courseForm.value.class_id = row.id;
      getClassCourseList(row.id);
      // 获取教师列表
      if (!teacherList.value.length) getTeacherList();
      // 获取所有课程列表
      getCourseList(row.id);

      courseVisible.value = true;
      nowClass.value = row;
    }
    function getCourseList(id) {
      request.get(`/class/courseNotList/${id}`).then((res) => {
        if (res.status != 200) {
          return ElMessage.error(res.message);
        }
        courseList.value = res.data;

        // console.log(courseList);
      });
    }
    // 获取班级下的课程列表
    function getClassCourseList(id) {
      request.get(`/class/courselist/${id}`).then((res) => {
        if (res.status != 200) {
          return ElMessage.error(res.message);
        }
        classCourseList.value = res.data;
        console.log(classCourseList);
      });
    }
    // 添加班级下的课程
    function addClassCourse() {
      console.log(courseForm.value);
      request.post("/class/addCourse", unref(courseForm)).then((res) => {
        console.log(res);

        ElMessage({
          message: res.message,
          type: res.status == 200 ? "success" : "error",
        });
        if (res.status == 200) {
          courseForm.value = {
            course_id: courseForm.value.course_id,
            t_id: null,
            class_id: null,
          };
          getClassCourseList(courseForm.value.class_id);
          getCourseList(courseForm.value.class_id);
        }
      });
    }

    // 修改班级下的课程
    let updateClassCourseVisible = ref(false);
    function updateClassCourse(row) {
      console.log(row);
      courseForm.value = { ...row };

      updateClassCourseVisible.value = true;
    }
    function updateClassCourseCommit() {
      console.log(courseForm.value);
      const form = {
        class_id: courseForm.value.classId,
        ...unref(courseForm.value),
      };
      console.log(form);
      request.put("/class/updateCourse", form).then((res) => {
        if (res.status != 200) {
          return ElMessage.error(res.message);
        }
        ElMessage.success(res.message);
        getClassCourseList(form.class_id);
        updateClassCourseVisible.value = false;
      });
    }
    // 统一关闭清空方法
    function courseHandleClose() {
      const { class_id } = courseForm.value;
      courseForm.value = {
        class_id,
      };
      updateClassCourseVisible.value = false;
    }

    // 隔行变色
    const tableRowClassName = ({ row, rowIndex }) => {
      if (row.is_delete == 1) {
        return "error-row";
      }
      if (rowIndex % 2 == 1) {
        return "warning-row";
      } else if (rowIndex % 2 == 0) {
        return "success-row";
      }
      return "";
    };
    return {
      classData,
      tableRowClassName,
      updateClass,
      dialogVisible,
      form,
      teacherList,
      updateClassCommit,
      rules,
      classFormRef,
      handleClose,
      deleteClass,
      rowClick,
      courseVisible,
      nowClass,
      classCourseList,
      courseList,
      courseForm,
      addClassCourse,
      updateClassCourse,
      updateClassCourseVisible,
      updateClassCourseCommit,
      courseHandleClose,
    };
  },
};
</script>

<style lang="less">
.el-table {
  background: none;
  --el-table-tr-bg-color: none;
  font-size: 18px;
  color: #333;
  // text-align: center;
}
.el-table .warning-row {
  --el-table-tr-bg-color: rgba(163, 213, 209, 0.164);
}
.el-table .success-row {
  --el-table-tr-bg-color: rgba(73, 167, 128, 0.247);
}
.el-table .error-row {
  --el-table-tr-bg-color: rgba(224, 28, 37, 0.5);
}
.top {
  position: relative;
  height: 40px;
  margin: 10px;
  .el-button {
    position: absolute;
    right: 120px;
    padding: 0 30px;
    font-size: 18px;
  }
}
.el_t_c_click:hover {
  cursor: pointer;
  color: red;
}
.courseFromdiv {
  .el-form {
    display: flex;
    justify-content: center;
    // align-items: center;
  }
}
</style>